<template>
  <div class="form-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="font-extra-large">评论详情</span>
        <el-button
          style="margin: 0; margin-left: 20px; padding: 3px 0"
          type="text"
          @click="back"
          >返回</el-button
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleVerify(comment.id)"
          >审核</el-button
        >
      </div>
      <div class="font-title-medium item">
        评论状态:
        <span
          :class="comment.status === 30 ? 'color-success' : 'color-danger'"
          >{{ comment.statusName }}</span
        >
      </div>
      <div class="font-title-medium item">
        所属资源ID: <span>{{ comment.mediaId }}</span>
      </div>
      <div class="font-title-medium item">
        所属资源类型: <span>{{ comment.mediaTypeName }}</span>
      </div>
      <div class="font-title-medium item">
        是否被置顶: <span>{{ judgeTopping(comment.type) }}</span>
      </div>
      <div
        class="font-title-medium item"
        style="background-color: #909399; color: white"
      >
        评论内容: <span>{{ comment.content }}</span>
      </div>
      <div class="font-title-medium item">
        点赞量: <span>{{ comment.likedCount }}</span>
      </div>
      <div class="font-title-medium item">
        点踩量: <span>{{ comment.hateCount }}</span>
      </div>
      <div class="font-title-medium item">
        评论时间: <span>{{ comment.createTime }}</span>
      </div>
      <div class="font-title-medium item">
        评论者: <span>{{ comment.userNickname }}</span>
      </div>
      <div class="font-title-medium item" v-if="hasReplyUser(comment.toUuid)">
        被回复者: <span>{{ comment.toUserNickname }}</span>
      </div>
      <div class="font-title-medium item">
        综合得分: <span>{{ comment.score }}</span>
      </div>
    </el-card>
    <el-card
      style="margin-top: 40px"
      class="box-card"
      shadow="hover"
      v-if="comment.parent"
    >
      <div slot="header" class="clearfix">
        <span class="font-extra-large">上级评论</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleVerify(comment.parent.id)"
          >审核</el-button
        >
      </div>
      <div class="font-title-medium item">
        评论状态:
        <span
          :class="
            comment.parent.status === 30 ? 'color-success' : 'color-danger'
          "
          >{{ comment.parent.statusName }}</span
        >
      </div>
      <div class="font-title-medium item">
        所属资源ID: <span>{{ comment.parent.mediaId }}</span>
      </div>
      <div class="font-title-medium item">
        所属资源类型: <span>{{ comment.parent.mediaTypeName }}</span>
      </div>
      <div class="font-title-medium item">
        是否被置顶: <span>{{ judgeTopping(comment.parent.type) }}</span>
      </div>
      <div
        class="font-title-medium item"
        style="background-color: #909399; color: white"
      >
        评论内容: <span>{{ comment.parent.content }}</span>
      </div>
      <div class="font-title-medium item">
        点赞量: <span>{{ comment.parent.likedCount }}</span>
      </div>
      <div class="font-title-medium item">
        点踩量: <span>{{ comment.parent.hateCount }}</span>
      </div>
      <div class="font-title-medium item">
        评论时间: <span>{{ comment.parent.createTime }}</span>
      </div>
      <div class="font-title-medium item">
        评论者: <span>{{ comment.parent.userNickname }}</span>
      </div>
      <div
        class="font-title-medium item"
        v-if="hasReplyUser(comment.parent.toUuid)"
      >
        被回复者: <span>{{ comment.parent.toUserNickname }}</span>
      </div>
      <div class="font-title-medium item">
        综合得分: <span>{{ comment.parent.score }}</span>
      </div>
    </el-card>
    <el-dialog title="审核" :visible.sync="verifyDialogVisible" width="30%">
      <el-form :model="verifyForm" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="verifyForm.verifyStatus" size="medium">
            <el-radio :label="40">下架</el-radio>
            <el-radio :label="30">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="verifyForm.detail"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleVerifySubmit" size="small"
          >确 定</el-button
        >
        <el-button @click="verifyDialogVisible = false" size="small"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getComment, updateStatus } from "@/api/comment";
const defaultComment = {
  cid: null,
  content: "",
  createTime: null,
  hateCount: 0,
  id: null,
  likedCount: 0,
  mediaId: null,
  mediaType: null,
  mediaTypeName: "",
  parent: null,
  rid: null,
  score: 0,
  status: null,
  statusName: "",
  toUserNickname: "",
  toUuid: null,
  type: null,
  updateTime: null,
  userAvatar: null,
  userNickname: null,
  uuid: null,
};
export default {
  data() {
    return {
      comment: Object.assign({}, defaultComment),
      verifyDialogVisible: false,
      verifyForm: {
        ids: [],
        verifyStatus: 30,
        detail: "",
      },
    };
  },
  created() {
    this.getCommentDetail();
  },
  methods: {
    getCommentDetail() {
      getComment(this.$route.query.id).then((response) => {
        this.comment = response.data;
        // console.log(this.comment);
      });
    },
    back() {
      // 返回上级
      this.$router.back();
    },
    hasReplyUser(toUuid) {
      if (toUuid !== undefined && toUuid !== null && toUuid != 0) {
        return true;
      } else {
        return false;
      }
    },
    judgeTopping(type) {
      if (type === 1) {
        return "是";
      } else {
        return "否";
      }
    },
    handleVerify(id) {
      this.verifyDialogVisible = true;
      this.verifyForm.ids = [id];
    },
    handleVerifySubmit() {
      let params = new URLSearchParams();
      params.append("ids", this.verifyForm.ids);
      params.append("verifyStatus", this.verifyForm.verifyStatus);
      params.append("detail", this.verifyForm.detail);
      updateStatus(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
        this.verifyDialogVisible = false;
        this.getCommentDetail();
      });
    },
  },
};
</script>

<style>
/* .text {
  font-size: 14px;
} */

.item {
  margin-bottom: 18px;
}
</style>